<template>
  <div class="container">
    <GraphicView @gridClick="handleGridClick" @gridHover="" />
    <RecordWindow ref="recordWindow" />
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import GraphicView from "./GraphicView.vue";
import RecordWindow from "./RecordWindow.vue";

const recordWindow = ref();
const handleGridClick = (payload) => {
  recordWindow.value.open(payload);
};
</script>

<style scoped>
.container {
  height: 100%;
  width: 100%;
}

.query-container {
  height: 30px;
  width: 100%;
  border: 1px solid #00f;
}

.graphic-coontainer {
  height: calc(100vh - 200px - 30px);
  width: 100%;
  border: 1px solid #f00;
}
</style>
